<template>
  <div class="head">
    <slot name="logo" />
    <span v-if="goBack" class="left" @click="$router.go(-1)">
      <img src="~assets/img/return.png" />
    </span>
    <span v-if="title" class="middle">{{ title }}</span>
    <span v-if="headTitle" class="location">{{ headTitle }}</span>
    <slot name="order" />
    <div v-if="!signUp && loginFlag" class="right">
      <nuxt-link to="">
        <span> 登录|注册</span>
      </nuxt-link>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    goBack: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    headTitle: {
      type: String,
      default: ''
    },
    signUp: {
      type: Boolean,
      default: false
    },
    loginFlag: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style lang="stylus" scoped>
.head {
  position fixed
  top 0
  left 0
  width 100%
  height 42px
  z-index 1000
  background #fafbfc
  border-bottom 1px solid #efefef
}

.head span {
  display inline-block
}

.left {
  width 12%
}

.left img {
  width 16px
  margin-left 16px
  vertical-align -2px
}

.middle {
  display inline-block
  width 70%
  line-height 42px
  font-size 14px
  text-align center
}

.location {
  width 70%
  font-size 14px
  line-height 42px
  color #ff9cf9
  margin-left 6px
  white-space nowrap
  overflow hidden
  text-overflow ellipsis
}

.right {
  float right
  margin-right 10px
  text-align center
  font-size 12px
  line-height 42px
  color #999
  img {
    width 20px
    vertical-align -4px
  }
}
</style>
